<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F.img</title>
<link type="text/css" rel="stylesheet" href="../css/admin.css" />
<link type="text/css" rel="stylesheet" href="../css/item_show.css" />
<script type="text/javascript" src="../../1st.js"></script>
<script type="text/javascript" src="../../1st.highlight.js"></script>
</head>
<body id="split">
<div id="content">
	<div rel="F.param">
		<h2><span>返回值:</span>F.img</h2>
					<h3>概述 : 图片预加载</h3>
						
			<div class="desc">
				<div class="longdesc"><pre>等同于F.loadImg</pre></div>
			</div>
							<h3>语法1：F.loadImg(url,oneLoaded,allLoaded)</h3>
						<table class="args">
				<!--caption>参数列表：(3)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>url</strong></td><td></td><td>URL地址</td></tr>
									<tr><td><strong>oneLoaded</strong></td><td></td><td>每个图片加载完触发的事件</td></tr>
									<tr><td><strong>allLoaded</strong></td><td></td><td>所有图片加载完触发的事件</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>$1stjs</td><td></td></tr>
			</table>
				<div class="example">
			<h3>示例 : </h3>
							<h5 xmlns="">CSS代码:</h5>
				<pre xmlns=""><code id="cssbox"></code></pre>
						
							<h5 xmlns="">HTML代码:</h5>
				<pre xmlns=""><code id="htmlbox"></code></pre>
									
				<h5 xmlns="">JS代码:</h5>
				<pre xmlns=""><code id="jsbox"></code></pre>
								</div>
		<div style="text-align:right">
			
					
				<button onclick="window.open('../codepages/38.html');">运行代码</button>
						
		</div><br/>	
		<div>
			<h3>同类参考 :</h3>
			<div>
							<span><a href='40.html'>F.ajax</a></span>&#12288;|&#12288;							<span><a href='119.html'>F.get</a></span>&#12288;|&#12288;							<span><a href='66.html'>F.post</a></span>&#12288;|&#12288;							<span><a href='112.html'>F().load</a></span>&#12288;|&#12288;							<span><a href='146.html'>F.js</a></span>&#12288;|&#12288;							<span><a href='33.html'>F.css</a></span>&#12288;|&#12288;							<span><a href='52.html'>F.flash</a></span>&#12288;|&#12288;							<span><a href='53.html'>F.audio</a></span>&#12288;|&#12288;							<span><a href='72.html'>F.video</a></span>						</div>
		</div>
	</div>
</div><br />

<textarea id="css" style="display:none;">#imgbox img{width:30px;height:30px;}
#numbox div{position:relative;width:30px;height:30px;float:left;}</textarea>
<textarea id="html" style="display:none;"><div>图片数目：<span id="imgNum"></span></div>

<div id="imgbox"></div>
<div id="numbox"></div>
<div style="position:absolute; left:50%; top:50%; width:304px; height:50px; margin:-25px -152px;">
    <div style="position:absolute; left:0px; top:0px; width:300px; height:20px; border:2px solid blue;"></div>
    <div id="timebar" style="position:absolute; left:2px; top:2px; width:0px; height:20px; background-color:green;"></div>
    <div style="position:absolute; left:0px; top:30px; width:300px; height:20px;">加载进度: <span id="timeper">0%</span></div>
</div></textarea>
<textarea id="js" style="display:none;">var u = "http://www.likaituan.net/music/miniplayer/skin/";

function showImgList(imgs){
    F("imgNum").html(imgs.split(",").length);
    imgs = imgs.replace(/^|,/g,"$&"+u);
    var rnd = "?" + Math.random();
    imgs = imgs.replace(/,|$/g, rnd+"$&");
    
    var timebar = F("timebar");
    var timeper = F("timeper");
    var imgbox = F("imgbox");
    var numbox = F("numbox");
    var oneLoaded = function(idx, count, img){
        timebar.css("w",Math.floor(idx/count*300));
        timeper.html(Math.floor(idx/count*100) + "%");
        imgbox.append("img").src(img.src);
        numbox.append("div").html(idx);
    }
    
    var allLoaded = function(){
        alert("图片载入完毕");
    }
    
    F.loadImg(imgs, oneLoaded, allLoaded);
}
document.write('<script type="text/javascript" src="'+u+'getimglist.php"></scr'+'ipt>');</textarea>
<textarea id="result" style="display:none;"></textarea>


<script type="text/javascript">
var css = F('css').val();
var html = F('html').val();		
var js = F('js').val();
var result = F('result').val();
css && F('cssbox').highlight(css, "css");
html && F('htmlbox').highlight(html, "html");
js && F('jsbox').highlight(js, "js");
result && F('resultbox').highlight(result,"js");
</script>

</body>
</html>